{% extends 'mobile_app/base.html' %}
{% load static %}

{% block title %}缴费充值 - 郑州移不动{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="mb-0">
                <i class="fas fa-credit-card text-primary me-2"></i>缴费充值
            </h2>
            <div>
                <span class="badge bg-primary fs-6">
                    <i class="fas fa-phone me-1"></i>{{ phone.number }}
                </span>
            </div>
        </div>
    </div>
</div>

<div class="row justify-content-center">
    <div class="col-md-8 col-lg-6">
        <!-- 当前余额 -->
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-body text-center">
                <h5 class="text-muted mb-3">当前余额</h5>
                <h2 class="text-success fw-bold">¥{{ phone.balance.amount|floatformat:2 }}</h2>
                <p class="text-muted mb-0">最后更新：{{ phone.balance.last_updated|date:"Y-m-d H:i" }}</p>
            </div>
        </div>

        <!-- 缴费表单 -->
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">
                    <i class="fas fa-plus me-2"></i>充值缴费
                </h5>
            </div>
            <div class="card-body">
                <form method="post">
                    {% csrf_token %}
                    
                    <div class="mb-4">
                        <label for="{{ payment_form.amount.id_for_label }}" class="form-label">充值金额</label>
                        <div class="input-group">
                            <span class="input-group-text">¥</span>
                            {{ payment_form.amount }}
                        </div>
                        {% if payment_form.amount.errors %}
                            <div class="text-danger small mt-1">
                                {% for error in payment_form.amount.errors %}
                                    <div>{{ error }}</div>
                                {% endfor %}
                            </div>
                        {% endif %}
                        <div class="form-text">请输入充值金额，最低0.01元</div>
                    </div>

                    <div class="mb-4">
                        <label for="{{ payment_form.payment_method.id_for_label }}" class="form-label">缴费方式</label>
                        {{ payment_form.payment_method }}
                        {% if payment_form.payment_method.errors %}
                            <div class="text-danger small mt-1">
                                {% for error in payment_form.payment_method.errors %}
                                    <div>{{ error }}</div>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>

                    <div class="mb-4">
                        <label for="{{ payment_form.description.id_for_label }}" class="form-label">备注信息</label>
                        {{ payment_form.description }}
                        {% if payment_form.description.errors %}
                            <div class="text-danger small mt-1">
                                {% for error in payment_form.description.errors %}
                                    <div>{{ error }}</div>
                                {% endfor %}
                            </div>
                        {% endif %}
                        <div class="form-text">可选，添加备注信息</div>
                    </div>

                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="fas fa-credit-card me-2"></i>确认缴费
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 快速充值金额 -->
        <div class="card border-0 shadow-sm mt-4">
            <div class="card-header bg-light">
                <h6 class="mb-0">
                    <i class="fas fa-bolt me-2"></i>快速充值
                </h6>
            </div>
            <div class="card-body">
                <div class="row g-2">
                    <div class="col-3">
                        <button class="btn btn-outline-primary w-100 quick-amount" data-amount="10">
                            ¥10
                        </button>
                    </div>
                    <div class="col-3">
                        <button class="btn btn-outline-primary w-100 quick-amount" data-amount="20">
                            ¥20
                        </button>
                    </div>
                    <div class="col-3">
                        <button class="btn btn-outline-primary w-100 quick-amount" data-amount="50">
                            ¥50
                        </button>
                    </div>
                    <div class="col-3">
                        <button class="btn btn-outline-primary w-100 quick-amount" data-amount="100">
                            ¥100
                        </button>
                    </div>
                    <div class="col-3">
                        <button class="btn btn-outline-primary w-100 quick-amount" data-amount="200">
                            ¥200
                        </button>
                    </div>
                    <div class="col-3">
                        <button class="btn btn-outline-primary w-100 quick-amount" data-amount="500">
                            ¥500
                        </button>
                    </div>
                    <div class="col-6">
                        <button class="btn btn-outline-secondary w-100" onclick="clearAmount()">
                            <i class="fas fa-times me-1"></i>清空
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 缴费说明 -->
        <div class="card border-0 bg-info text-white mt-4">
            <div class="card-body">
                <h6 class="mb-3">
                    <i class="fas fa-info-circle me-2"></i>缴费说明
                </h6>
                <ul class="mb-0 small">
                    <li>缴费成功后，余额将立即到账</li>
                    <li>支持多种缴费方式，请根据实际情况选择</li>
                    <li>如有疑问，请联系客服：10086</li>
                    <li>缴费记录可在余额查询页面查看</li>
                </ul>
            </div>
        </div>

        <!-- 返回按钮 -->
        <div class="text-center mt-4">
            <a href="{% url 'mobile_app:balance_query' phone.id %}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>返回余额查询
            </a>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 为表单字段添加Bootstrap样式
    $('input[type="number"], select, input[type="text"]').addClass('form-control');
    
    // 快速充值金额选择
    $('.quick-amount').on('click', function() {
        var amount = $(this).data('amount');
        $('#id_amount').val(amount);
        $(this).addClass('active').siblings().removeClass('active');
    });
    
    // 金额输入验证
    $('#id_amount').on('input', function() {
        var value = parseFloat($(this).val());
        if (value && value > 0) {
            $(this).removeClass('is-invalid').addClass('is-valid');
        } else if ($(this).val() !== '') {
            $(this).removeClass('is-valid').addClass('is-invalid');
        } else {
            $(this).removeClass('is-valid is-invalid');
        }
    });
    
    // 表单提交确认
    $('form').on('submit', function(e) {
        var amount = parseFloat($('#id_amount').val());
        var method = $('#id_payment_method option:selected').text();
        
        if (!amount || amount <= 0) {
            e.preventDefault();
            alert('请输入有效的充值金额');
            return false;
        }
        
        if (!confirm(`确定要使用${method}充值¥${amount.toFixed(2)}吗？`)) {
            e.preventDefault();
            return false;
        }
    });
});

function clearAmount() {
    $('#id_amount').val('').removeClass('is-valid is-invalid');
    $('.quick-amount').removeClass('active');
}
</script>

<style>
.quick-amount.active {
    background-color: var(--primary-color) !important;
    color: white !important;
    border-color: var(--primary-color) !important;
}

.quick-amount:hover {
    background-color: var(--primary-color) !important;
    color: white !important;
    border-color: var(--primary-color) !important;
}
</style>
{% endblock %}
